<template>
  <el-dialog :title="$t('tool.modelManage.versionStatistics')" :visible.sync="dialogVisible" width="30vw"
    :close-on-click-modal="false">
    <div class="version-statistics" style="max-height: 650px; overflow-y: auto">
      <el-timeline>
        <el-timeline-item v-for="time in timeLineList" :key="time.mainVersionId"
          :timestamp="time.updateTime ? time.updateTime : time.createTime" placement="top">
          <el-card>
            <h4 @click="changeMainVersion(time)">{{ time.mainVersionName }}</h4>
            <p @click="changeMainVersion(time)">{{ time.mainVersionDescription }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      timeLineList: [],
    };
  },
  methods: {
    init(list) {
      this.dialogVisible = true;
      this.timeLineList = JSON.parse(JSON.stringify(list));
    },
    changeMainVersion(time) {
      this.$emit('changeMainVersion', time)
    }
  },
};
</script>

<style scoped>
.version-statistics ::v-deep .el-timeline .el-card.is-always-shadow:hover {
  border-color: var(--app-primary-base);
}
</style>